<!DOCTYPE html>
<html>
    <head>
        <title>Custom Model</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style> 
        <script src="../../../../lib/core/ht.js"></script> 
        <script src="../../../../lib/plugin/ht-modeling.js"></script> 
                
        <script>                         
            
            
            function init(){                                                   
                ht.Default.setImage('colors', '');
                ht.Default.setImage('earth', '');            
                ht.Default.setImage('colors2', '');            
        
                dataModel = new ht.DataModel();                
                g3d = new ht.graph3d.Graph3dView(dataModel);                  
                 
                view = g3d.getView();  
                view.className = 'main';
                document.body.appendChild(view);
                window.addEventListener('resize', function (e) {
                    g3d.invalidate();
                }, false);   
                                
                g3d.setGridVisible(true);
                g3d.setEditable(true);
                g3d.setEye([-82, 169, 327]);
                g3d.setCenter([-8, 48, 8]);
                g3d.enableToolTip();                
                g3d.getToolTip = function(e){
                    var data = this.getDataAt(e);
                    if(data){
                        return '<pre>' + JSON.stringify(data.getStyleMap(), null, 4) + '</pre>';
                    }
                    return null;
                };
                              
                d = 0.12;
                ht.Default.setShape3dModel('desktop', {
                    vs: [
                        // top plane
                        -0.5, 0.5, -0.5,
                        -0.5, 0.5, 0.5,
                        0.5, 0.5, 0.5,
                        0.5, 0.5, 0.5,
                        0.5, 0.5, -0.5,
                        -0.5, 0.5, -0.5,
                        
                        // left back foot  
                        -0.5, 0.5, -0.5,
                        -0.5, -0.5, -0.5,
                        -0.5, -0.5, -0.5+d,
                        -0.5, -0.5, -0.5+d,
                        -0.5, 0.5, -0.5+d,
                        -0.5, 0.5, -0.5,
                        
                        -0.5, 0.5, -0.5,
                        -0.5+d, -0.5, -0.5,
                        -0.5, -0.5, -0.5,
                        
                        -0.5+d, -0.5, -0.5,
                        -0.5, 0.5, -0.5,   
                        -0.5+d, 0.5, -0.5,                        
                        
                        // right back foot  
                        0.5, 0.5, -0.5,
                        0.5, -0.5, -0.5+d,
                        0.5, -0.5, -0.5,
                        
                        0.5, -0.5, -0.5+d,
                        0.5, 0.5, -0.5,
                        0.5, 0.5, -0.5+d,
                        
                        
                        0.5, 0.5, -0.5,
                        0.5, -0.5, -0.5,
                        0.5-d, -0.5, -0.5,
                        0.5-d, -0.5, -0.5,
                        0.5-d, 0.5, -0.5,
                        0.5, 0.5, -0.5,                           
                        
                        // left front foot  
                        -0.5, 0.5, 0.5,
                        -0.5, -0.5, 0.5-d,
                        -0.5, -0.5, 0.5,                        
                        -0.5, -0.5, 0.5-d,
                        -0.5, 0.5, 0.5,
                        -0.5, 0.5, 0.5-d,
                        
                        
                        -0.5, 0.5, 0.5,
                        -0.5, -0.5, 0.5,
                        -0.5+d, -0.5, 0.5,
                        -0.5+d, -0.5, 0.5,
                        -0.5+d, 0.5, 0.5,
                        -0.5, 0.5, 0.5, 
                        
                        // right front foot  
                        0.5, 0.5, 0.5,
                        0.5, -0.5, 0.5,
                        0.5, -0.5, 0.5-d,
                        0.5, -0.5, 0.5-d,
                        0.5, 0.5, 0.5-d,
                        0.5, 0.5, 0.5,
                        
                        0.5, 0.5, 0.5,
                        0.5-d, -0.5, 0.5,
                        0.5, -0.5, 0.5,                        
                        0.5-d, -0.5, 0.5,
                        0.5, 0.5, 0.5,   
                        0.5-d, 0.5, 0.5                                               
                    ]                    
                });
                ht.Default.setShape3dModel('chair', {
                    vs: [
                        // top plane
                        -0.5, 0, -0.5,
                        -0.5, 0, 0.5,
                        0.5, 0, 0.5,
                        0.5, 0, 0.5,
                        0.5, 0, -0.5,
                        -0.5, 0, -0.5,
                        
                        // foot
                        -0.5, 0, 0.5,
                        -0.5, 0, -0.5,                        
                        -0.5, -0.5, -0.5,
                        -0.5, -0.5, -0.5,
                        -0.5, -0.5, 0.5,
                        -0.5, 0, 0.5,
                        
                        // back
                        0.5, 0.5, 0.5,
                        0.5, 0.5, -0.5,                        
                        0.5, -0.5, -0.5,
                        0.5, -0.5, -0.5,
                        0.5, -0.5, 0.5,
                        0.5, 0.5, 0.5                        
                    ]
                });
                ht.Default.setShape3dModel('wall', {
                    vs: [                                                
                        -0.5, 0.5, 0,
                        -0.5, -0.5, 0,
                        0.5, -0.5, 0,
                        0.5, 0.5, 0
                    ],
                    is: [
                        0, 1, 2,
                        2, 3, 0
                    ],
                    uv: [
                       0, 0,
                       0, 1,
                       1, 1,
                       1, 0
                    ]
                });                
                
                createNode('desktop', [0, 50, 0], [100, 100, 100], '#E5BB77');                         
                createNode('chair', [100, 50, 0], [50, 100, 60], 'green');                         
                createNode('chair', [0, 50, -100], [50, 100, 60], '#E74C3C').r3(0, Math.PI/2, 0);
                createNode('chair', [-100, 50, 0], [50, 100, 60], '#34495E').r3(0, Math.PI, 0);
                createNode('chair', [0, 50, 100], [50, 100, 60]).r3(0, -Math.PI/2, 0);
                createNode('wall', [0, 80, -200], [400, 160, 5]).s('shape3d.image', 'earth');                                                         
                
                ht.Default.setShape3dModel('tree', createRingModel([
                    0, 0.5,
                    0.15, 0.3, 
                    0.05, 0.3,
                    0.05, 0.2,
                    0.2, 0.1,                                                                          
                    0.05, 0.1, 
                    0.05, 0, 
                    0.25, -0.2,
                    0.05, -0.2,
                    0.05, -0.5
                ]));
                createNode('tree', [-80, 20, 80], [60, 40, 60]).s('shape3d.image', 'colors2');
                
                ht.Default.setShape3dModel('pottery', createRingModel([
                    0.09, 0.45,
                    -0.06, 0.14,
                    0.37, 0.11,
                    0.17, -0.08,
                    0.32, 0.16,
                    0.36, -0.27,
                    -0.05, -0.14,
                    -0.17, -0.44
                ], [1, 4, 1, 4]));                
                createNode('pottery', [0, 115, 0], [60, 30, 60]).s('shape3d.image', 'colors2');
                
                ht.Default.setShape3dModel('pot', ht.Default.createSmoothRingModel([
                    0.48, 0.45, 
                    0.21, 0.10, 
                    0.51, -0.19,
                    0.23, -0.45,                                                                          
                    0.14, -0.41, 
                    0.17, 0.39,
                    0.48, 0.45
                ], [1, 4, 4]));                
                createNode('pot', [-100, 60, 0], [30, 20, 30]).s('shape3d.image', 'colors2');                
                
                cupPoints = [
                    0.5, 0.5,
                    0.4, -0.26,
                    0, 0,
                    -0.3, -0.5                       
                ];
                cupSegments = [1, 4];                               
                
                ht.Default.setShape3dModel('cup3', createRingModel(cupPoints, cupSegments, 3));                
                createNode('cup3', [-40, 105, 30], [10, 10, 10]).s('shape3d.image', 'colors');    
                
                ht.Default.setShape3dModel('cup4', createRingModel(cupPoints, cupSegments, 4));                
                createNode('cup4', [-20, 105, 30], [10, 10, 10]).s('shape3d.image', 'colors');                 
                
                ht.Default.setShape3dModel('cup', createRingModel(cupPoints, cupSegments));                
                createNode('cup', [0, 105, 30], [10, 10, 10]).s('shape3d.image', 'colors');  
                
                ht.Default.setShape3dModel('cup5', createRingModel(cupPoints, cupSegments, 5));                
                createNode('cup5', [20, 105, 30], [10, 10, 10]).s('shape3d.image', 'colors');                 
                
                ht.Default.setShape3dModel('cup6', createRingModel(cupPoints, cupSegments, 6));                
                createNode('cup6', [40, 105, 30], [10, 10, 10]).s('shape3d.image', 'colors');                 
                
                ht.Default.setShape3dModel('heart', ht.Default.createExtrusionModel([
                    0, -0.32, 
                    0.70, -0.75, 
                    0.52, 0.23,
                    0, 0.42,                                                                          
                    -0.47, 0.28, 
                    -0.70, -0.75,
                    0, -0.32
                ], [1, 4, 4], true, true, 30));                
                createNode('heart', [100, 54, 0], [30, 6, 30]).s('shape3d.color', 'red');                   
                
            }             
            
            function createRingModel(points, segments, side){
                // points, segments, resolution, top, bottom, side, sideFrom, sideTo, from, to
                return ht.Default.createRingModel(points, segments, 12, false, false, side, 0, side, false, false);
            }
            
            function createNode(shape, p3, s3, color){
                var node = new ht.Node();
                node.s({
                    'shape3d': shape,
                    'shape3d.color': color,
                    'shape3d.reverse.flip': true
                });                
                node.p3(p3);                
                node.s3(s3);                                
                dataModel.add(node);
                return node;
            }
                        
        </script>
    </head>
    <body onload="init();">                                
    </body>
</html>